<template>
  <div>
    <formula @on-clear="handleClear" @on-back="handleBack">
      <span class="vhtml" v-html="showContent"></span>
    </formula>
    <div class="ab">
      <div class="a">计算对象：</div>
      <div class="b">
        <template v-for="(item, i) in cols">
          <template v-if="item.column">
            <sym3 v-for="(childItem, j) in item.column"
            :key="j"
            :parentObj="item"
            :obj="childItem"
            @on-add="handleAdd3" />
          </template>
          <template v-else>
            <sym :obj="item" :key="i" @on-add="handleAdd" />
          </template>
        </template>
        <el-button type="text" @click="handleMore">更多</el-button>
        <div v-if="moreIsShow">
          <template v-for="(item, i) in moreCols">
            <template v-if="item.column">
              <sym3 v-for="(childItem, j) in item.column"
              :key="j"
              :parentObj="item"
              :obj="childItem"
              @on-add="handleAdd3" />
            </template>
            <template v-else>
              <sym :obj="item" :key="i" @on-add="handleAdd" />
            </template>
          </template>
        </div>
      </div>
    </div>
    <div class="ab">
      <div class="a">计算符号：</div>
      <div class="b">
        <sym2 v-for="(s, i) in sign1"
        :key="i"
        :to="s"
        @on-add="handleAdd2" />
      </div>
    </div>
    <div class="ab">
      <div class="a">数字键盘：</div>
      <div class="b" style="width: 170px; flex: none">
        <sym2 v-for="(s, i) in sign2"
        :key="i"
        :to="s"
        @on-add="handleAdd2" />
      </div>
    </div>
    <div class="ab">
      <div class="a">函数说明：</div>
      <div class="b" style="width: 370px; flex: none">
        1、mod:取模运算,例：mod(33,24) = 9；
        2、floor:向下取整,例：floor(1.54) = 1；
        3、ceil:向上取整,例：ceil(1.45) = 2；
        4、round:四舍五入,例：round(1.54) = 2；
        5、abs:绝对值,例：abs(-1) = 1；
        6、ceiling:向上舍入,例：ceiling(1.2,0.5)=1.5；
        7、max:取数据最大值,max(3,4)=4；
        8、min:取数据最小值,例：min(3,4)=3；
        9、subAvg:取子表数组平均,例：subAvg(子表.字段)=平均值。
      </div>
    </div>
  </div>
</template>

<script>
import formula from './formula.vue'
import sym from './sym.vue'
import sym2 from './sym2.vue'
import sym3 from './sym3.vue'
import mixcontent from './mixcontent'
export default {
  mixins: [mixcontent],
  props: {
    moreCols: {
      type: Array,
      default: () => []
    }
  },
  components: {
    formula,
    sym2,
    sym,
    sym3
  },
  data() {
    return {
      signA: ['+', '-', '*', '/', '(', ')'],
      signMath: ['mod', 'floor', 'ceil', 'round', 'abs', 'ceiling', 'max', 'min', 'subAvg'],
      sign1: [],
      sign2: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'],
      moreIsShow: false
    }
  },
  watch: {
    values() {
      let labelsStr = ''
      let valuesStr = ''
      this.labels.map(s => {
        labelsStr += s
      })
      this.values.map(s => {
        valuesStr += s
      })
      this.showContent = labelsStr
      this.content = valuesStr

      this.$emit('on-add', {
        content: valuesStr,
        showContent: labelsStr,
        labels: this.labels,
        values: this.values
      })
    }
  },
  mounted() {
    const {
      labels,
      values
    } = this.item

    this.sign1 = [
      ...this.signA,
      ...this.signMath,
      ','
    ]

    if (values?.length) {
      this.labels = labels
      this.values = values
    }
  },
  methods: {
    handleMore() {
      this.moreIsShow = !this.moreIsShow
    },
    handleClear() {
      this.labels = []
      this.values = []
    },
    handleBack() {
      const valLen = this.values.length
      this.labels = this.labels.slice(0, valLen - 1)
      this.values = this.values.slice(0, valLen - 1)
    },
    handleAdd2(s) {
      this.addItem(s, s)
    },
    handleAdd({ label, prop }) {
      this.addItem(
        this.getLabel(label),
        `${prop} `
      )
    },
    handleAdd3(obj, parentObj) {
      this.addItem(
        this.getLabel(`${parentObj.label}.${obj.label}`),
        `${parentObj.prop}.${obj.prop} `
      )
    },
    addItem(lab, val) {
      this.labels = [
        ...this.labels,
        lab
      ]
      if (this.signMath.includes(val)) {
        this.values = [
          ...this.values,
          `math.${val}`
        ]
      } else {
        this.values = [
          ...this.values,
          val
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'modal';
</style>
